{include file="common/header" /}

<script>
// 防抖函数定义
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

document.title = "橘喵云 | 首页";

// 响应式布局处理
function handleResponsiveLayout() {
  const width = window.innerWidth;
  
  // 处理统计数据布局
  const heroStats = document.querySelector('.hero-stats');
  if (heroStats) {
    if (width <= 480) {
      // 超小屏幕使用单列
      heroStats.style.gridTemplateColumns = '1fr';
    } else if (width <= 768) {
      // 小屏幕使用两列
      heroStats.style.gridTemplateColumns = 'repeat(2, 1fr)';
    } else {
      // 恢复默认flex布局
      heroStats.style.display = 'flex';
    }
  }
  
  // 处理数据中心选项卡
  const datacenterTabs = document.querySelector('.datacenter-tabs');
  if (datacenterTabs) {
    if (width <= 768) {
      // 小屏幕使用可滚动布局
      datacenterTabs.style.flexWrap = 'nowrap';
      datacenterTabs.style.overflowX = 'auto';
      datacenterTabs.style.justifyContent = 'flex-start';
      
      // 添加滚动提示
      if (datacenterTabs.scrollWidth > datacenterTabs.clientWidth && !document.querySelector('.scroll-indicator')) {
        const scrollIndicator = document.createElement('div');
        scrollIndicator.className = 'scroll-indicator';
        scrollIndicator.style.position = 'absolute';
        scrollIndicator.style.bottom = '-15px';
        scrollIndicator.style.left = '50%';
        scrollIndicator.style.transform = 'translateX(-50%)';
        scrollIndicator.style.fontSize = '0.7rem';
        scrollIndicator.style.color = '#aaa';
        scrollIndicator.style.opacity = '0.7';
        scrollIndicator.textContent = '← 滑动查看更多 →';
        datacenterTabs.style.position = 'relative';
        datacenterTabs.appendChild(scrollIndicator);
        
        // 3秒后淡出
        setTimeout(() => {
          scrollIndicator.style.transition = 'opacity 0.5s ease';
          scrollIndicator.style.opacity = '0';
          
          // 完全移除
          setTimeout(() => {
            scrollIndicator.remove();
          }, 500);
        }, 3000);
      }
    } else {
      // 恢复默认布局
      datacenterTabs.style.flexWrap = 'wrap';
      datacenterTabs.style.overflowX = 'visible';
      datacenterTabs.style.justifyContent = 'center';
    }
  }
  
  // 处理卡片网格布局
  const grids = [
    '.datacenter-grid',
    '.certificates-grid',
    '.clients-grid',
    '.news-grid',
    '.why-us-grid',
    '.contact-info-grid'
  ];
  
  grids.forEach(selector => {
    const grid = document.querySelector(selector);
    if (grid) {
      if (width <= 768) {
        // 小屏幕使用单列
        grid.style.gridTemplateColumns = '1fr';
      } else if (width <= 992) {
        // 中等屏幕使用两列
        grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
      } else {
        // 恢复默认布局
        grid.style.gridTemplateColumns = selector === '.why-us-grid' || selector === '.contact-info-grid' 
          ? 'repeat(auto-fill, minmax(250px, 1fr))' 
          : 'repeat(auto-fill, minmax(350px, 1fr))';
      }
    }
  });
  
  // 处理页脚布局
  const footerGrid = document.querySelector('.footer-grid');
  if (footerGrid) {
    if (width <= 768) {
      // 小屏幕使用单列
      footerGrid.style.gridTemplateColumns = '1fr';
      
      // 居中对齐
      document.querySelectorAll('.footer-col').forEach(col => {
        col.style.textAlign = 'center';
      });
      
      document.querySelectorAll('.footer-social').forEach(social => {
        social.style.justifyContent = 'center';
      });
    } else {
      // 恢复默认布局
      footerGrid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(250px, 1fr))';
      
      // 恢复对齐
      document.querySelectorAll('.footer-col').forEach(col => {
        col.style.textAlign = '';
      });
      
      document.querySelectorAll('.footer-social').forEach(social => {
        social.style.justifyContent = '';
      });
    }
  }
  
  // 处理备案信息布局
  const beianInfo = document.querySelector('.beian-info');
  if (beianInfo) {
    if (width <= 768) {
      // 小屏幕使用垂直布局
      beianInfo.style.display = 'flex';
      beianInfo.style.flexDirection = 'column';
      beianInfo.style.alignItems = 'center';
      beianInfo.style.gap = '0.5rem';
      
      document.querySelectorAll('.beian-info a').forEach(link => {
        link.style.margin = '0';
      });
    } else {
      // 恢复默认布局
      beianInfo.style.display = '';
      beianInfo.style.flexDirection = '';
      beianInfo.style.alignItems = '';
      beianInfo.style.gap = '';
      
      document.querySelectorAll('.beian-info a').forEach(link => {
        link.style.margin = '0 10px';
      });
    }
  }
}

// 初始化响应式布局
handleResponsiveLayout();

// 监听窗口大小变化
window.addEventListener('resize', debounce(function() {
  handleResponsiveLayout();
}, 250));
</script>

<!-- 性能优化 - 预加载关键资源 -->
<link rel="preload" href="{$setting.web_view}/placeholder.svg?height=450&width=450" as="image">
<link rel="preload" href="{$setting.web_view}/placeholder.svg?height=36&width=36" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<meta name="description" content="橘喵云是专业的全球IDC服务提供商，提供高品质的服务器托管、云服务、网络安全等全方位解决方案，助力企业数字化转型。">
<meta name="keywords" content="橘喵云,IDC服务,服务器托管,云服务,数据中心,网络安全,企业数字化,全球IDC">
<!-- 添加结构化数据 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "橘喵云",
"url": "https://cloud.ogmiao.com/",
"logo": "{$setting.web_view}/placeholder.svg?height=36&width=36",
"description": "专业的全球IDC服务提供商，提供高品质的服务器托管、云服务、网络安全等全方位解决方案",
"contactPoint": {
  "@type": "ContactPoint",
  "telephone": "暂无电话",
  "contactType": "customer service",
  "availableLanguage": ["Chinese", "English"]
}
}
</script>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#f08a5d" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#d07a4d" media="(prefers-color-scheme: dark)">

<style>
/* 基础样式 */
:root {
--primary: #f08a5d;
--primary-dark: #e67e22;
--primary-light: #fad7a0;
--secondary: #f9b384;
--accent: #ffbe76;
--dark: #2d3436;
--light: #ffffff;
--gray: #636e72;
--gray-light: #f8f8f8;
--footer-bg: #f5f5f5;
--footer-text: #555555;
--footer-title: #333333;
--success: #26de81;
--warning: #fed330;
--danger: #fc5c65;
--bg-gradient: linear-gradient(135deg, rgba(240, 138, 93, 0.8), rgba(249, 179, 132, 0.8));
--card-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
--card-hover-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

/* 添加专业性相关的颜色变量 */
--tech-badge-bg: rgba(240, 138, 93, 0.1);
--tech-badge-color: #f08a5d;
--tech-highlight: #3498db;
--tech-highlight-light: rgba(52, 152, 219, 0.1);
--cert-badge-bg: rgba(38, 222, 129, 0.1);
--cert-badge-color: #26de81;
}

.dark {
  --dark-bg: #000000;
  --dark-card-bg: #0a0a0a;
  --dark-card-bg-hover: #121212;
  --dark-text: #cccccc;
  --dark-text-secondary: #888888;
  --dark-border: #222222;
  --dark-hover: #1a1a1a;
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  --dark-primary: #b36a3d; /* Reduced brightness */
  --dark-primary-light: #c08060; /* Reduced brightness */
  --dark-secondary: #b98164; /* Reduced brightness */
  --dark-accent: #bfa056; /* Reduced brightness */
  --dark-success: #1b9861; /* Reduced brightness */
  --dark-warning: #be9310; /* Reduced brightness */
  --dark-danger: #bc4c45; /* Reduced brightness */
}

/* 英雄区域样式 */
.hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
background-color: var(--light);
overflow: hidden;
padding: 2rem 0;
}

.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.85)),
  url('{$setting.web_view}/placeholder.svg?height=1200&width=1920');
background-size: cover;
background-position: center;
z-index: 0;
animation: subtleBackground 60s ease-in-out infinite;
}

@keyframes subtleBackground {
0% {
  background-position: center center;
}
50% {
  background-position: center 51%;
}
100% {
  background-position: center center;
}
}

/* 添加专业的背景装饰 - 技术感网格 */
.hero-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: 
  linear-gradient(rgba(240, 138, 93, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(240, 138, 93, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
z-index: 1;
animation: subtleShift 30s ease-in-out infinite;
}

@keyframes subtleShift {
0% {
  background-position: 0% 0%;
}
50% {
  background-position: 1% 1%;
}
100% {
  background-position: 0% 0%;
}
}

.dark .hero-bg {
background: linear-gradient(135deg, rgba(18, 18, 18, 0.92), rgba(18, 18, 18, 0.85)),
  url('{$setting.web_view}/placeholder.svg?height=1200&width=1920');
background-size: cover;
background-position: center;
}

.dark .hero-bg::before {
background-image: 
  linear-gradient(rgba(208, 122, 77, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(208, 122, 77, 0.05) 1px, transparent 1px);
}

.hero-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: center;
position: relative;
z-index: 2;
}

.hero-content {
flex: 1;
min-width: 300px;
padding: 1.5rem 0;
}

.hero-image {
flex: 1;
min-width: 300px;
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
padding: 1rem;
}

/* 更新标题样式，增加专业感 */
.hero-subtitle {
display: inline-block;
background-color: rgba(240, 138, 93, 0.1);
color: var(--primary);
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
border-left: 3px solid var(--primary);
}

.hero-subtitle::before {
content: "⚙️";
margin-right: 8px;
}

.hero h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: var(--dark);
line-height: 1.2;
}

.hero h1 span {
color: var(--primary);
position: relative;
display: inline-block;
}

.hero h1 span::after {
content: "";
position: absolute;
bottom: 0.2rem;
left: 0;
width: 100%;
height: 0.3rem;
background-color: var(--primary-light);
z-index: -1;
}

.hero p {
font-size: 1.2rem;
color: var(--gray);
margin-bottom: 2.5rem;
max-width: 90%;
}

/* 更新统计数据样式，增加专业感 */
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 3rem;
margin-bottom: 2rem;
}

/* 修复问题1：服务可用性显示不完全，调整hero-stat的样式 */
.hero-stat {
flex: 1;
min-width: 120px;
background-color: white;
padding: 1.2rem 0.8rem; /* 减少左右内边距 */
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
border-top: 3px solid var(--primary);
animation: none; /* 移除默认的呼吸动画 */
}

.hero-stat:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.hero-stat::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(240, 138, 93, 0.03) 0%, transparent 80%);
z-index: 0;
}

.hero-stat-number {
font-size: 2.2rem; /* 减小字体大小 */
font-weight: 700;
color: var(--primary);
line-height: 1;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}

.hero-stat-label {
font-size: 0.85rem; /* 减小字体大小 */
color: var(--gray);
position: relative;
z-index: 1;
white-space: nowrap; /* 防止文字换行 */
}

.dark .hero-stat {
background-color: #1e1e1e;
border-color: var(--dark-primary);
}

.dark .hero-stat:hover {
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.dark .hero-stat::before {
background: linear-gradient(135deg, rgba(208, 122, 77, 0.05) 0%, transparent 80%);
}

/* 全新设计：更大的吉祥物展示 */
.mascot-showcase {
position: relative;
width: 100%;
height: 600px; /* 增加高度从500px到600px */
display: flex;
justify-content: center;
align-items: center;
}

/* 修改吉祥物容器样式，使其能够正确适应竖向图片 */
.mascot-container {
position: relative;
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}

/* 修改吉祥物图片样式，确保保持原始宽高比 */
.mascot-image {
  max-width: 100%;
  max-height: 550px; /* 增加最大高度从450px到550px */
  width: auto;
  height: auto;
  object-fit: contain;
  animation: gentleFloat 10s ease-in-out infinite;
  transition: all 0.5s ease;
  border-radius: 30px; /* 添加圆角效果 */
}

/* 新的更温和的浮动动画 */
@keyframes gentleFloat {
0% {
  transform: translateY(0);
}
50% {
  transform: translateY(-8px);
}
100% {
  transform: translateY(0);
}
}

/* 添加专业元素 - 技术感背景 */
.mascot-bg {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(240, 138, 93, 0.08) 0%, rgba(240, 138, 93, 0) 70%);
z-index: 0;
}

/* 添加技术感圆环 */
.mascot-bg::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 480px;
height: 480px;
transform: translate(-50%, -50%);
border: 1px dashed rgba(240, 138, 93, 0.2);
border-radius: 50%;
animation: lazy-rotate 120s linear infinite;
}

.mascot-bg::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 520px;
height: 520px;
transform: translate(-50%, -50%);
border: 1px dashed rgba(240, 138, 93, 0.1);
border-radius: 50%;
animation: lazy-rotate 180s linear infinite reverse;
}

@keyframes lazy-rotate {
0% {
  transform: translate(-50%, -50%) rotate(0deg);
}
100% {
  transform: translate(-50%, -50%) rotate(360deg);
}
}

/* 添加家的元素 - 装饰性小房子图标 */
.home-icon {
position: absolute;
font-size: 24px;
opacity: 0.7;
animation: gentleSway 15s ease-in-out infinite;
transition: all 0.3s ease;
z-index: 1;
}

@keyframes gentleSway {
0% {
  transform: rotate(0deg);
}
25% {
  transform: rotate(3deg);
}
75% {
  transform: rotate(-3deg);
}
100% {
  transform: rotate(0deg);
}
}

.home-icon-1 {
top: 15%;
left: 15%;
animation-delay: 0.5s;
}

.home-icon-2 {
bottom: 20%;
right: 18%;
animation-delay: 1.5s;
}

.home-icon-3 {
top: 25%;
right: 20%;
animation-delay: 1s;
}

.home-icon-4 {
bottom: 25%;
left: 20%;
animation-delay: 2s;
}

/* 添加活泼元素 - 漂浮的彩色圆点 */
.floating-dot {
position: absolute;
border-radius: 50%;
opacity: 0.6;
z-index: 1;
animation: float-slow 10s ease-in-out infinite;
}

.dot-1 {
width: 15px;
height: 15px;
background-color: var(--primary);
top: 10%;
left: 30%;
animation-delay: 0.2s;
}

.dot-2 {
width: 10px;
height: 10px;
background-color: var(--secondary);
bottom: 15%;
right: 25%;
animation-delay: 1.2s;
}

.dot-3 {
width: 12px;
height: 12px;
background-color: var(--accent);
top: 20%;
right: 30%;
animation-delay: 0.7s;
}

.dot-4 {
width: 8px;
height: 8px;
background-color: var(--primary-light);
bottom: 20%;
left: 35%;
animation-delay: 1.7s;
}

/* 暗黑模式适配 */
.dark .mascot-bg {
background: radial-gradient(circle, rgba(208, 122, 77, 0.08) 0%, rgba(208, 122, 77, 0) 70%);
}

.dark .mascot-bg::before {
border-color: rgba(208, 122, 77, 0.2);
}

.dark .mascot-bg::after {
border-color: rgba(208, 122, 77, 0.1);
}

.dark .home-icon {
color: #d07a4d;
}

.dark .floating-dot.dot-1 {
background-color: #d07a4d;
}

.dark .floating-dot.dot-2 {
background-color: #d99b74;
}

.dark .floating-dot.dot-3 {
background-color: #dfae66;
}

.dark .floating-dot.dot-4 {
background-color: #e0a080;
}

/* 更新按钮样式，增加专业感 */
.btn-group {
display: flex;
gap: 1rem;
justify-content: center; /* 确保按钮始终居中 */
}

.btn {
display: inline-block;
padding: 0.9rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
text-align: center;
}

.btn-primary {
background-color: var(--primary);
color: white;
box-shadow: 0 4px 15px rgba(240, 138, 93, 0.3);
animation: subtlePulse 5s infinite ease-in-out;
}

@keyframes subtlePulse {
0% {
  box-shadow: 0 4px 15px rgba(240, 138, 93, 0.3);
}
50% {
  box-shadow: 0 4px 20px rgba(240, 138, 93, 0.4);
}
100% {
  box-shadow: 0 4px 15px rgba(240, 138, 93, 0.3);
}
}

.btn-primary:hover {
background-color: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(240, 138, 93, 0.4);
}

.btn-outline {
background-color: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}

.btn-outline:hover {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(240, 138, 93, 0.3);
}

/* 数据中心区域样式 */
.datacenter {
padding: 6rem 0;
background-color: var(--light);
}

.section-title {
text-align: center;
margin-bottom: 3rem;
opacity: 1 !important;
transform: none !important;
animation: none !important;
}

/* 修复问题2：全球数据中心文字不能一行全部显示 */
.section-title h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 1rem;
position: relative;
display: inline-block;
white-space: nowrap; /* 防止文字换行 */
opacity: 1 !important; /* 强制设置为可见 */
transform: translateY(0) !important; /* 强制设置为正常位置 */
}

.section-title p {
font-size: 1.1rem;
color: var(--gray);
max-width: 700px;
margin: 0 auto;
opacity: 1 !important; /* 强制设置为可见 */
transform: translateY(0) !important; /* 强制设置为正常位置 */
}

.section-title h2 span {
color: var(--primary);
}

.datacenter-tabs {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}

.datacenter-tab {
padding: 0.8rem 2rem;
background-color: var(--gray-light);
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
color: var(--gray);
}

.datacenter-tab.active {
background-color: var(--primary);
color: white;
box-shadow: 0 5px 15px rgba(240, 138, 93, 0.3);
}

.datacenter-tab:hover:not(.active) {
background-color: rgba(240, 138, 93, 0.1);
transform: translateY(-3px);
}

.datacenter-content {
display: none;
}

.datacenter-content.active {
display: block;
animation: fadeIn 0.5s ease-out;
}

.datacenter-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
}

.datacenter-card {
background-color: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: none; /* 移除默认的呼吸动画 */
}

.datacenter-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}

.datacenter-img {
height: 180px;
background-size: cover;
background-position: center;
position: relative;
}

.datacenter-level {
position: absolute;
top: 15px;
right: 15px;
background-color: var(--primary);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
}

.datacenter-content-inner {
padding: 1.5rem;
}

.datacenter-content-inner h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--dark);
}

.datacenter-content-inner p {
color: var(--gray);
margin-bottom: 1.5rem;
font-size: 0.95rem;
}

.datacenter-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}

.datacenter-feature {
background-color: rgba(240, 138, 93, 0.1);
color: var(--primary);
padding: 0.3rem 0.8rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 500;
position: relative;
}

.flag {
margin-right: 0.5rem;
}

/* 证书区域样式 */
.certificates {
padding: 6rem 0;
background-color: var(--gray-light);
}

.certificates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}

.certificate-card {
background-color: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: none; /* 移除默认的呼吸动画 */
}

.certificate-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}

.certificate-img {
height: 160px;
background-size: cover;
background-position: center;
}

.certificate-content {
padding: 1.5rem;
}

.certificate-content h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.8rem;
color: var(--dark);
}

padding: 1.5rem;
}

.certificate-content h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.8rem;
color: var(--dark);
}

.certificate-content p {
color: var(--gray);
font-size: 0.9rem;
}

/* 客户案例区域样式 */
.clients {
padding: 6rem 0;
background-color: var(--light);
}

.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
}

.client-card {
background-color: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: none; /* 移除默认的呼吸动画 */
}

.client-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}

.client-img {
height: 200px;
background-size: cover;
background-position: center;
position: relative;
}

.client-logo-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  align-items: center;
}

.client-logo {
  height: 60px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.client-logo:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(240, 138, 93, 0.3);
}

.dark .client-logo {
  background-color: rgba(30, 30, 30, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.dark .client-logo:hover {
  box-shadow: 0 5px 15px rgba(176, 106, 61, 0.3);
}

.client-content {
padding: 1.5rem;
}

.client-content h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--dark);
}

.client-content p {
color: var(--gray);
margin-bottom: 1.5rem;
font-size: 0.95rem;
}

.client-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}

.client-tag {
background-color: rgba(240, 138, 93, 0.1);
color: var(--primary);
padding: 0.3rem 0.8rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 500;
}

/* 新闻动态区域样式 */
.news {
padding: 6rem 0;
background-color: var(--gray-light);
}

.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
}

.news-card {
background-color: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: none; /* 移除默认的呼吸动画 */
}

.news-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}

.news-img {
height: 200px;
background-size: cover;
background-position: center;
position: relative;
}

.news-date {
position: absolute;
bottom: 15px;
left: 15px;
background-color: var(--primary);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 50px;
font-weight: 500;
font-size: 0.9rem;
}

.news-content {
padding: 1.5rem;
}

.news-content h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--dark);
}

.news-content p {
color: var(--gray);
margin-bottom: 1.5rem;
font-size: 0.95rem;
}

.news-link {
color: var(--primary);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
transition: all 0.3s;
}

.news-link span {
margin-left: 0.5rem;
transition: transform 0.3s;
}

.news-link:hover {
color: var(--primary-dark);
}

.news-link:hover span {
transform: translateX(5px);
}

/* 为什么选择我们区域样式 */
.why-us {
padding: 6rem 0;
background-color: var(--light);
}

.why-us-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}

.why-us-card {
background-color: white;
border-radius: 15px;
padding: 2rem;
box-shadow: var(--card-shadow);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-align: center;
animation: none; /* 移除默认的呼吸动画 */
}

.why-us-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}

.why-us-icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

.why-us-card h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--dark);
}

.why-us-card p {
color: var(--gray);
font-size: 0.95rem;
}

/* FAQ区域样式 */
.faq {
  padding: 6rem 0;
  background-color: var(--gray-light);
}

.card {
  background-color: white;
  border-radius: 15px;
  margin-bottom: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  border: none;
}

.card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 0;
  background-color: white;
  border-bottom: none;
}

.faq-question {
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--dark);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 1.1rem; /* 增加字体大小 */
}

.faq-question:after {
  content: "+";
  font-size: 1.8rem; /* 增加加号大小 */
  transition: transform 0.4s ease;
}

.faq-question[aria-expanded="true"] {
  color: var(--primary);
}

.dark .faq-question[aria-expanded="true"] {
}

.faq-question[aria-expanded="true"]:after {
  content: "×";
  transform: rotate(45deg);
}

.collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.collapse.show {
  max-height: 500px;
}

.card-body {
  padding: 1.5rem;
  color: var(--gray);
  font-size: 1rem; /* 增加字体大小 */
  line-height: 1.6;
}

/* 修复FAQ项目边框连接问题 */
#faq .container > div > div {
  margin-bottom: 1.5rem !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

/* 修复FAQ问题和答案的边框重叠问题 */
.faq-question {
  border-bottom: none;
}

.card-header {
  border-bottom: none !important;
}

.collapse {
  border-top: none;
}

.card-body {
  border-top: none;
}

/* 联系我们区域样式 */
.contact {
padding: 6rem 0;
background-color: var(--light);
}

.contact-info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}

.contact-info-item {
background-color: white;
border-radius: 15px;
padding: 2rem;
box-shadow: var(--card-shadow);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-align: center;
animation: none; /* 移除默认的呼吸动画 */
}

.contact-info-item:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}

.contact-info-icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

.contact-info-content h4 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--dark);
}

.contact-info-content p {
color: var(--gray);
font-size: 1rem;
}

<div class="contact-info-item">
  <div class="contact-info-icon">🎫</div>
  <div class="contact-info-content">
    <h4>工单系统</h4>
    <p>提交工单获取专业技术支持</p>
    <a href="https://cloud.ogmiao.com/submitticket" class="btn btn-primary" style="margin-top: 10px; font-size: 0.9rem; padding: 0.5rem 1rem;">提交工单</a>
  </div>
</div>
</div>
</section>

/* 动画效果 */
@keyframes float {
0% {
  transform: scale(1);
}
50% {
  transform: scale(1.03);
}
100% {
  transform: scale(1);
}
}

@keyframes float-slow {
0% {
  transform: translateY(0) rotate(0deg);
}
50% {
  transform: translateY(-8px) rotate(3deg);
}
100% {
  transform: translateY(0) rotate(0deg);
}
}

@keyframes pulse {
0% {
  transform: scale(1);
}
50% {
  transform: scale(1.03);
}
100% {
  transform: scale(1);
}
}

@keyframes fadeIn {
from {
  opacity: 0;
  transform: translateY(20px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

/* 响应式调整 */

/* 响应式调整 - 基础断点 */
@media (max-width: 1200px) {
.hero h1 {
  font-size: 3.2rem;
}

.hero p {
  font-size: 1.1rem;
}

.section-title h2 {
  font-size: 2.3rem;
}

.section-title p {
  font-size: 1rem;
}

.datacenter-grid,
.clients-grid,
.news-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.certificates-grid,
.why-us-grid,
.contact-info-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}

@media (max-width: 992px) {
.hero-container {
  gap: 2rem;
}

.hero-content {
  text-align: center;
  padding: 1rem 0;
}

.hero-content p {
  max-width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.btn-group {
  justify-content: center;
}

.hero-stats {
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

/* 修改响应式代码中的吉祥物相关样式 */
  .mascot-container {
    width: auto;
    height: auto;
  }
  
  .mascot-image {
    max-height: 500px; /* 增加最大高度从400px到500px */
    width: auto;
  }

  .mascot-bg {
    width: 520px; /* 增加背景圆环尺寸 */
    height: 520px;
  }

.datacenter-grid,
.clients-grid,
.news-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.certificates-grid,
.why-us-grid,
.contact-info-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}

@media (max-width: 768px) {
.hero h1 {
  font-size: 2.8rem;
}

/* 修改响应式代码中的吉祥物相关样式 */
  .mascot-container {
    width: auto;
    height: auto;
  }
  
  .mascot-image {
    max-height: 450px; /* 增加最大高度从350px到450px */
    width: auto;
  }

  .mascot-bg {
    width: 480px; /* 增加背景圆环尺寸 */
    height: 480px;
  }

.hero-stats {
  gap: 1rem;
  margin-top: 1.5rem;
}

.hero-stat {
  padding: 1rem;
}

.hero-stat-number {
  font-size: 2rem;
}

.hero-stat-label {
  font-size: 0.8rem;
}

.datacenter-grid,
.clients-grid,
.news-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.certificates-grid,
.why-us-grid,
.contact-info-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.datacenter-tab {
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
}

.hero-stats {
  flex-wrap: wrap;
  justify-content: center;
}

.hero-stat {
  flex: 0 0 calc(50% - 1rem);
  margin-bottom: 1rem;
}
}

@media (max-width: 576px) {
  .mascot-showcase {
    height: 350px;
  }
  
  /* 修改响应式代码中的吉祥物相关样式 */
  .mascot-container {
    width: auto;
    height: auto;
  }
  
  .mascot-image {
    max-height: 280px;
    width: auto;
  }

.mascot-bg {
  width: 300px;
  height: 300px;
}

.home-icon, .floating-dot {
  transform: scale(0.8);
}

.hero-container {
  flex-direction: column;
  gap: 1rem;
}

.hero-content {
  order: 1;
  width: 100%;
  padding: 0.5rem 0;
}

.hero-image {
  order: 0;
  width: 100%;
  justify-content: center;
  padding: 10px;
}

.hero h1 {
  font-size: 2.2rem;
}

.hero p {
  font-size: 1rem;
}

.hero-subtitle {
  font-size: 0.85rem;
  padding: 0.3rem 1rem;
  margin-bottom: 0.8rem;
}

.btn-group {
  flex-direction: column;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  gap: 0.5rem;
}

.btn {
  width: 100%;
}

.hero-stat {
  flex: 0 0 100%;
}

.datacenter-grid,
.certificates-grid,
.clients-grid,
.news-grid,
.why-us-grid,
.contact-info-grid {
  grid-template-columns: 1fr;
}

.datacenter-tab {
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
}

.section-title h2 {
  font-size: 2rem;
}

.section-title p {
  font-size: 0.9rem;
}
}

/* 暗黑模式样式 */
.dark .hero h1 {
color: #e0e0e0;
}

.dark .hero p {
color: #aaaaaa;
}

.dark .hero-subtitle {
background-color: rgba(208, 122, 77, 0.15);
color: #e0a080;
}

.dark .hero-stat {
background-color: #1e1e1e;
border-color: rgba(208, 122, 77, 0.1);
}

.dark .hero-stat:hover {
box-shadow: 0 12px 25px rgba(208, 122, 77, 0.15);
}

.dark .hero-stat-number {
color: #d07a4d;
}

.dark .hero-stat-label {
color: #aaaaaa;
}

.dark .section-title h2 {
color: #e0e0e0;
}

.dark .section-title p {
color: #aaaaaa;
}

.dark .datacenter,
.dark .clients,
.dark .why-us,
.dark .contact {
background-color: #121212;
}

.dark .certificates,
.dark .news,
.dark .faq {
background-color: #1a1a1a;
}

.dark .datacenter-tab {
background-color: #2a2a2a;
color: #aaaaaa;
}

.dark .datacenter-tab.active {
background-color: #d07a4d;
color: #e0e0e0;
box-shadow: 0 5px 15px rgba(208, 122, 77, 0.3);
}

.dark .datacenter-tab:hover:not(.active) {
background-color: rgba(208, 122, 77, 0.15);
}

.dark .datacenter-card,
.dark .certificate-card,
.dark .client-card,
.dark .news-card,
.dark .why-us-card,
.dark .contact-info-item,
.dark .card {
background-color: #1e1e1e;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.dark .card-header {
background-color: #1e1e1e;
}

.dark .faq-question {
color: #e0e0e0;
}

.dark .faq-question[aria-expanded="true"] {
color: #d07a4d;
}

.dark .card-body {
color: #aaaaaa;
}

.dark .datacenter-card:hover,
.dark .certificate-card:hover,
.dark .client-card:hover,
.dark .news-card:hover,
.dark .why-us-card:hover,
.dark .contact-info-item:hover,
.dark .card:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.dark .datacenter-content-inner h3,
.dark .certificate-content h3,
.dark .client-content h3,
.dark .news-content h3,
.dark .why-us-card h3,
.dark .contact-info-content h4 {
color: #e0e0e0;
}

.dark .datacenter-content-inner p,
.dark .certificate-content p,
.dark .client-content p,
.dark .news-content p,
.dark .why-us-card p,
.dark .contact-info-content p {
color: #aaaaaa;
}

.dark .datacenter-feature,
.dark .client-tag {
background-color: rgba(208, 122, 77, 0.15);
color: #e0a080;
}

.dark .datacenter-level,
.dark .news-date {
background-color: #d07a4d;
}

.dark .news-link {
color: #e0a080;
}

.dark .news-link:hover {
color: #d07a4d;
}

/* 添加专业性标识 - 技术参数悬浮提示 */
.datacenter-feature {
position: relative;
}

/* 添加专业性标识 - 技术指标图标 */
.tech-badge {
display: inline-flex;
align-items: center;
background-color: rgba(240, 138, 93, 0.1);
color: var(--primary);
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
margin-right: 5px;
margin-bottom: 5px;
}

.tech-badge i {
margin-right: 4px;
font-size: 14px;
}

.dark .tech-badge {
background-color: rgba(208, 122, 77, 0.15);
color: #e0a080;
}

/* 修复问题3：FAQ项目边框连接问题 - 添加额外的样式确保分隔 */
#faq .container > div > div {
margin-bottom: 1.5rem !important;
border-radius: 15px !important;
overflow: hidden !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

/* 修复FAQ问题和答案的边框重叠问题 */
.faq-question {
border-bottom: none;
}

.card-header {
border-bottom: none !important;
}

.collapse {
border-top: none;
}

.card-body {
border-top: none;
}

/* 加载状态样式 */
.lazy-image {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.lazy-image.loaded {
opacity: 1;
}

/* 无障碍优化 - 焦点样式 */
:focus {
outline: 3px solid var(--primary);
outline-offset: 2px;
}

.skip-to-content {
position: absolute;
top: -40px;
left: 0;
background: var(--primary);
color: white;
padding: 8px;
z-index: 100;
transition: top 0.3s;
}

.skip-to-content:focus {
top: 0;
}

/* 减少动画对性能的影响 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
}

/* 修改按钮组样式，确保在iPad Pro尺寸下居中 */
.btn-group {
display: flex;
gap: 1rem;
justify-content: center; /* 确保按钮始终居中 */
}

/* 在小屏幕设备上减小统计数据的尺寸 */
@media (max-width: 768px) {
  .hero-stats {
    gap: 0.8rem; /* 减小间距 */
    margin-top: 1.2rem;
    margin-bottom: 1.5rem;
  }
  
  .hero-stat {
    padding: 0.8rem 0.5rem; /* 减小内边距 */
  }
  
  .hero-stat-number {
    font-size: 1.8rem; /* 减小数字字体大小 */
  }
  
  .hero-stat-label {
    font-size: 0.75rem; /* 减小标签字体大小 */
  }
}

/* 在更小的屏幕上进一步减小尺寸 */
@media (max-width: 576px) {
  .hero-stats {
    gap: 0.6rem;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
  }
  
  .hero-stat {
    padding: 0.6rem 0.4rem;
    min-width: 100px; /* 减小最小宽度 */
  }
  
  .hero-stat-number {
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
  }
  
  .hero-stat-label {
    font-size: 0.7rem;
  }
}

/* 添加iPad Pro特定样式 */
@media (min-width: 1024px) and (max-width: 1366px) {
  .btn-group {
    justify-content: center !important; /* 强制居中 */
  }
  
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* 内容居中 */
  }
  
  .hero-content p {
    text-align: center;
  }
}

// 在<style>标签内添加以下移动端优化样式，放在现有样式的底部

/* 移动端优化 - 全面重构 */
@media (max-width: 768px) {
  /* 基础布局优化 */
  .container {
    width: 100%;
    padding: 0 15px;
  }
  
  /* 英雄区域移动端优化 */
  .hero {
    min-height: auto;
    padding: 3rem 0 1rem;
  }
  
  .hero-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .hero-content {
    order: 1;
    padding: 0;
  }
  
  .hero-image {
    order: 0;
    padding: 0;
    margin-bottom: 1rem;
  }
  
  .mascot-showcase {
    height: 300px;
  }
  
  .mascot-image {
    max-height: 250px;
  }
  
  .mascot-bg {
    width: 280px;
    height: 280px;
  }
  
  /* 标题和文本优化 */
  .hero h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .hero p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .hero-subtitle {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    margin-bottom: 0.8rem;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 统计数据完全重构 */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
  }
  
  .hero-stat {
    padding: 0.6rem 0.4rem;
    border-radius: 8px;
    min-width: 0;
    flex: none;
    width: 100%;
  }
  
  .hero-stat-number {
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
  }
  
  .hero-stat-label {
    font-size: 0.65rem;
  }
  
  /* 按钮组优化 */
  .btn-group {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .btn {
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
  }
  
  /* 各部分间距优化 */
  .partner-section,
  .datacenter,
  .certificates,
  .clients,
  .why-us,
  .news,
  .faq,
  .contact {
    padding: 3rem 0;
  }
  
  /* 标题优化 */
  .section-title {
    margin-bottom: 1.5rem;
  }
  
  .section-title h2 {
    font-size: 1.6rem;
    white-space: normal;
  }
  
  .section-title p {
    font-size: 0.85rem;
    padding: 0 0.5rem;
  }
  
  /* 数据中心选项卡优化 */
  .datacenter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  
  .datacenter-tab {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  
  /* 卡片布局优化 */
  .datacenter-grid,
  .certificates-grid,
  .clients-grid,
  .news-grid,
  .why-us-grid,
  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .datacenter-card,
  .certificate-card,
  .client-card,
  .news-card,
  .why-us-card,
  .contact-info-item {
    margin-bottom: 1rem;
  }
  
  /* 卡片内容优化 */
  .datacenter-content-inner,
  .certificate-content,
  .client-content,
  .news-content {
    padding: 1rem;
  }
  
  .datacenter-content-inner h3,
  .certificate-content h3,
  .client-content h3,
  .news-content h3,
  .why-us-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  
  .datacenter-content-inner p,
  .certificate-content p,
  .client-content p,
  .news-content p,
  .why-us-card p {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }
  
  /* 特性标签优化 */
  .datacenter-features {
    gap: 0.3rem;
    margin-bottom: 1rem;
  }
  
  .datacenter-feature {
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
  }
  
  /* FAQ部分优化 */
  .faq-question {
    padding: 1rem;
    font-size: 0.9rem;
  }
  
  .card-body {
    padding: 0 1rem 1rem;
    font-size: 0.85rem;
  }
  
  /* 联系我们部分优化 */
  .contact-info-item {
    padding: 1.5rem 1rem;
  }
  
  .contact-info-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .contact-info-content h4 {
    font-size: 1.1rem;
  }
  
  .contact-info-content p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.8rem;
  }
  
  .hero-stats {
    grid-template-columns: 1fr;
  }
  
  .mascot-showcase {
    height: 250px;
  }
  
  .mascot-image {
    max-height: 200px;
  }
  
  .mascot-bg {
    width: 220px;
    height: 220px;
  }
  
  .section-title h2 {
    font-size: 1.4rem;
  }
  
  .why-us-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .contact-info-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}

/* 更新移动端导航样式，适应更多导航项 */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 0.5rem 0;
  justify-content: space-around;
  overflow-x: auto;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .mobile-nav {
    display: flex !important;
  }
  
  /* 为底部导航添加额外的底部内边距，防止内容被遮挡 */
  body {
    padding-bottom: 60px !important;
  }
}
/* 移动端底部导航样式 - 完整重构 */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: 0.5rem 0;
  justify-content: space-around;
  overflow-x: auto;
  white-space: nowrap;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--gray);
  font-size: 0.65rem;
  padding: 0.3rem 0.5rem;
  min-width: 60px;
  transition: all 0.3s ease;
}

.mobile-nav-icon {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  transition: all 0.3s ease;
}

.mobile-nav-item.active {
  color: var(--primary);
}

.mobile-nav-item:hover {
  color: var(--primary);
}

/* 暗黑模式适配 */
.dark .mobile-nav {
  background-color: #1a1a1a;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  border-top: 1px solid #222222;
}

.dark .mobile-nav-item {
  color: #aaaaaa;
}

.dark .mobile-nav-item.active,
.dark .mobile-nav-item:hover {
  color: #d07a4d;
}

/* 在小屏幕上进一步优化导航图标和文字大小 */
@media (max-width: 375px) {
  .mobile-nav-item {
    font-size: 0.6rem;
    min-width: 50px;
  }

  .mobile-nav-icon {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .mobile-nav {
    display: flex !important;
  }
  
  /* 为底部导航添加额外的底部内边距，防止内容被遮挡 */
  body {
    padding-bottom: 60px !important;
  }
}

/* 新的FAQ样式 */
.faq-list {
  margin-bottom: 2rem;
}

.faq-item {
  background-color: white;
  border-radius: 15px;
  margin-bottom: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.faq-question {
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--dark);
  font-size: 1.1rem;
  position: relative;
}

.faq-icon {
  font-size: 1.8rem;
  font-weight: 300;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question {
  color: var(--primary);
}

.dark .faq-item.active .faq-question {
}

.faq-answer {
  padding: 1.5rem;
  color: var(--gray);
  font-size: 1rem;
  line-height: 1.6;
  display: none;
}

.dark .faq-item {
  background-color: #1e1e1e;
}

.dark .faq-question {
  color: #e0e0e0;
}

.dark .faq-answer {
  color: #aaaaaa;
}

.dark img:not(.logo-img):not([class*="qr"]) {
  filter: brightness(0.8) contrast(0.85) saturate(0.9);
}

/* Add this to improve dark mode section backgrounds */
.dark section {
  background-color: #000000 !important;
}

.dark .partner-section:nth-child(even),
.dark .certificates,
.dark .news,
.dark .faq {
  background-color: #050505 !important;
}

/* Improve card styling in dark mode */
.dark .hero-card,
.dark .datacenter-card,
.dark .certificate-card,
.dark .client-card,
.dark .news-card,
.dark .why-us-card,
.dark .contact-info-item,
.dark .card {
  background-color: #0a0a0a;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* Improve text readability in dark mode */
.dark h1, 
.dark h2, 
.dark h3, 
.dark h4, 
.dark h5, 
.dark h6 {
  color: #cccccc !important;
}

.dark p, 
.dark li, 
.dark span:not([class*="countdown"]) {
  color: #888888 !important;
}

/* Improve header in dark mode */
.dark header {
  background-color: #000000;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}

/* Improve footer in dark mode */
.dark footer {
  background-color: #050505;
}

/* Improve mobile navigation in dark mode */
.dark .mobile-nav {
  background-color: #000000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  border-top: 1px solid #222222;
}

/* Add transition for smoother dark mode toggle */
body, section, header, footer, .card, .hero-card, img, h1, h2, h3, h4, h5, h6, p, span {
  transition: background-color 0.3s ease, color 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

// 添加CSS样式以确保内容区域正确显示/隐藏
// 在<style>标签内添加以下CSS：

/* 确保数据中内容区域的显示/隐藏正常工作 */
.datacenter-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.datacenter-content.active {
  display: block;
  opacity: 1;
}

/* 增强数据中心标签的可点击性 */
.datacenter-tab {
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
}

/* 添加点击波纹效果 */
.datacenter-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.datacenter-tab:active::after {
  opacity: 1;
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: scale(0, 0) translate(-50%, -50%);
  transition: transform 0.5s, opacity 1s;
}

/* 确保活动标签有明显的视觉区分 */
.datacenter-tab.active {
  font-weight: 700;
  transform: translateY(-2px);
}
</style>

</head>
<body>
<a href="#main-content" class="skip-to-content" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;">跳转到主要内容</a>

<!-- 英雄区域 -->
<section id="main-content" class="hero" role="main">
<div class="hero-bg"></div>
<div class="container">
  <div class="hero-container">
    <div class="hero-content">
      <div class="hero-subtitle">专业IDC服务提供商</div>
      <h1>企业级<span>全球IDC</span>解决方案</h1>
      <p>提供高可用性、高安全性的全球数据中心服务，包括服务器托管、云计算、网络安全等全方位技术解决方案，助力企业数字化转型</p>
      
      <div class="hero-stats">
        <div class="hero-stat">
          <div class="hero-stat-number">7+</div>
          <div class="hero-stat-label">全球数据中心</div>
        </div>
        <div class="hero-stat">
          <div class="hero-stat-number">99.9%</div>
          <div class="hero-stat-label">服务可用性</div>
        </div>
        <div class="hero-stat">
          <div class="hero-stat-number">24/7</div>
          <div class="hero-stat-label">全天候技术支持</div>
        </div>
        <div class="hero-stat">
          <div class="hero-stat-number">3年</div>
          <div class="hero-stat-label">运营经验</div>
        </div>
      </div>
      
      <div class="btn-group">
        <a href="#datacenter" class="btn btn-primary" aria-label="查看数据中心">查看数据中心</a>
        <a href="#contact" class="btn btn-outline" aria-label="联系我们">联系我们</a>
      </div>
    </div>
    
    <div class="hero-image">
      <!-- 全新设计的吉祥物展示 - 更大尺寸，更多活泼元素 -->
      <div class="mascot-showcase">
        <!-- 背景装饰 -->
        <div class="mascot-bg"></div>
        
        
        <!-- 添加活泼元素 - 漂浮的彩色圆点 -->
        <div class="floating-dot dot-1"></div>
        <div class="floating-dot dot-2"></div>
        <div class="floating-dot dot-3"></div>
        <div class="floating-dot dot-4"></div>
        
        <!-- 吉祥物容器 - 大幅增加尺寸 -->
        <!-- 修改吉祥物图片标签，添加宽高比例 -->
        <div class="mascot-container">
          <img src="{$setting.web_view}/img/jxw.webp" alt="橘喵云吉祥物" class="mascot-image" width="878" height="1536">
        </div>
      </div>
    </div>
  </div>
</div>
</section>

<!-- 重新排序：先展示证书区域，强调专业性 -->
<section id="certificates" class="certificates">
<div class="container certificates-container">
  <div class="section-title">
    <h2>专业<span>资质认证</span></h2>
    <p>我们拥有多项国际认可的专业资质认证，为您提供可靠的服务保障</p>
  </div>
  
  <div class="certificates-grid">
    <div class="certificate-card">
      <div class="certificate-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=160&width=250');"></div>
      <div class="certificate-content">
        <h3>ISO 9001质量管理体系认证</h3>
        <p>国际标准化组织颁发的质量管理体系认证，确保服务流程标准化</p>
      </div>
    </div>
    
    <div class="certificate-card">
      <div class="certificate-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=160&width=250');"></div>
      <div class="certificate-content">
        <h3>ISO 27001信息安全管理体系认证</h3>
        <p>国际标准化组织颁发的信息安全管理体系认证，保障数据安全</p>
      </div>
    </div>
    
    <div class="certificate-card">
      <div class="certificate-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=160&width=250');"></div>
      <div class="certificate-content">
        <h3>增值电信业务经营许可证</h3>
        <p>中国工信部颁发的增值电信业务经营许可证，合法合规运营</p>
      </div>
    </div>
    
    <div class="certificate-card">
      <div class="certificate-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=160&width=250');"></div>
      <div class="certificate-content">
        <h3>网络安全等级保护认证</h3>
        <p>中国公安部颁发的网络安全等级保护认证，确保网络安全</p>
      </div>
    </div>
  </div>
</div>
</section>

<!-- 数据中心区域 -->
<section id="datacenter" class="datacenter">
<div class="container datacenter-container">
  <div class="section-title">
    <h2>全球<span>数据中心</span>网络</h2>
    <p>我们在全球各地拥有多个T3+/T4级高标准数据中心，为您提供安全可靠的服务器托管环境和全球化服务</p>
  </div>
  
  <div class="datacenter-tabs" role="tablist">
  <div class="datacenter-tab active" data-region="asia" role="tab" aria-selected="true" tabindex="0">亚洲地区</div>
  <div class="datacenter-tab" data-region="america" role="tab" aria-selected="false" tabindex="0">美洲地区</div>
  <div class="datacenter-tab" data-region="europe" role="tab" aria-selected="false" tabindex="0">欧洲地区</div>
</div>
  
  <div class="datacenter-content active" id="asia-content" role="tabpanel" aria-labelledby="asia-tab">
    <div class="datacenter-grid">
      <div class="datacenter-card">
        <div class="datacenter-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=180&width=300');">
          <div class="datacenter-level">T3+</div>
        </div>
        <div class="datacenter-content-inner">
          <h3><span class="flag">🇭🇰</span> 中国香港数据中心</h3>
          <p>位于香港新界，T3+级别数据中心，拥有超过8000平方米的机房面积，提供高速网络连接和N+1冗余电力系统。</p>
          <div class="datacenter-features">
            <span class="datacenter-feature">10Gbps带宽</span>
            <span class="datacenter-feature">N+1冗余电力</span>
            <span class="datacenter-feature">国际BGP网络</span>
          </div>
          <a href="#" class="btn btn-primary">技术参数</a>
        </div>
      </div>
      
      <div class="datacenter-card">
        <div class="datacenter-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=180&width=300');">
          <div class="datacenter-level">T3</div>
        </div>
        <div class="datacenter-content-inner">
          <h3><span class="flag">🇨🇳</span> 中国成都数据中心</h3>
          <p>位于成都高新区，T3级别数据中心，拥有超过6000平方米的机房面积，提供全天候监控和技术支持服务。</p>
          <div class="datacenter-features">
            <span class="datacenter-feature">7x24监控</span>
            <span class="datacenter-feature">双线接入</span>
            <span class="datacenter-feature">防火墙防护</span>
          </div>
          <a href="#" class="btn btn-primary">技术参数</a>
        </div>
      </div>
      
      <div class="datacenter-card">
        <div class="datacenter-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=180&width=300');">
          <div class="datacenter-level">T4</div>
        </div>
        <div class="datacenter-content-inner">
          <h3><span class="flag">🇸🇬</span> 新加坡数据中心</h3>
          <p>位于新加坡裕廊，T4级别数据中心，拥有超过7500平方米的机房面积，作为东南亚地区的重要节点。</p>
          <div class="datacenter-features">
            <span class="datacenter-feature">99.995%可用性</span>
            <span class="datacenter-feature">2N冗余架构</span>
            <span class="datacenter-feature">多线路接入</span>
          </div>
          <a href="#" class="btn btn-primary">技术参数</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="datacenter-content" id="america-content" role="tabpanel" aria-labelledby="america-tab" hidden>
    <div class="datacenter-grid">
      <div class="datacenter-card">
        <div class="datacenter-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=180&width=300');">
          <div class="datacenter-level">T4+</div>
        </div>
        <div class="datacenter-content-inner">
          <h3><span class="flag">🇺🇸</span> 美国加州数据中心</h3>
          <p>位于美国加利福尼亚州，T4+级别数据中心，拥有超过15000平方米的机房面积，提供低延迟的北美地区网络连接。</p>
          <div class="datacenter-features">
            <span class="datacenter-feature">99.999%可用性</span>
            <span class="datacenter-feature">40ms内延迟</span>
            <span class="datacenter-feature">DDoS防护</span>
          </div>
          <a href="#" class="btn btn-primary">技术参数</a>
        </div>
      </div>
      
      <div class="datacenter-card">
        <div class="datacenter-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=180&width=300');">
          <div class="datacenter-level">T4</div>
        </div>
        <div class="datacenter-content-inner">
          <h3><span class="flag">🇺🇸</span> 美国弗吉尼亚数据中心</h3>
          <p>位于美国弗吉尼亚州，T4级别数据中心，拥有超过12000平方米的机房面积，是美国东海岸的重要网络节点。</p>
          <div class="datacenter-features">
            <span class="datacenter-feature">2N+1冗余</span>
            <span class="datacenter-feature">100Gbps骨干网</span>
            <span class="datacenter-feature">多层安全防护</span>
          </div>
          <a href="#" class="btn btn-primary">技术参数</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="datacenter-content" id="europe-content" role="tabpanel" aria-labelledby="europe-tab" hidden>
    <div class="datacenter-grid">
      <div class="datacenter-card">
        <div class="datacenter-img" style="background-image: url('{$setting.web_view}/placeholder.svg?height=180&width=300');">
          <div class="datacenter-level">T3+</div>
        </div>
        <div class="datacenter-content-inner">
          <h3><span class="flag">🇩🇪</span> 德国法兰克福数据中心</h3>
          <p>位于德国法兰克福，T3+级别数据中心，拥有超过9000平方米的机房面积，提供符合GDPR和欧盟标准的数据存储和处理服务。</p>
          <div class="datacenter-features">
            <span class="datacenter-feature">GDPR合规</span>
            <span class="datacenter-feature">PCI DSS认证</span>
            <span class="datacenter-feature">绿色能源</span>
          </div>
          <a href="#" class="btn btn-primary">技术参数</a>
        </div>
      </div>
    </div>
  </div>
</div>
</section>

<!-- 为什么选择我们区域 - 提前展示，强调专业性 -->
<section id="why-us" class="why-us">
<div class="container why-us-container">
  <div class="section-title">
    <h2>专业<span>服务优势</span></h2>
    <p>我们拥有多项技术优势，为您提供最专业的IDC服务</p>
  </div>
  
  <div class="why-us-grid">
    <div class="why-us-card">
      <div class="why-us-icon">🌐</div>
      <h3>全球化网络架构</h3>
      <p>采用BGP多线路接入技术，在全球多个地区设有数据中心，能够为您提供就近接入、低延迟的全球化服务，满足您的国际业务需求。</p>
    </div>
    
    <div class="why-us-card">
      <div class="why-us-icon">🔧</div>
      <h3>企业级硬件设施</h3>
      <p>采用Intel至强处理器、企业级SSD存储和Cisco/Juniper网络设备，确保服务的稳定性和安全性，为您的业务提供可靠保障。</p>
    </div>
    
    <div class="why-us-card">
      <div class="why-us-icon">⏰</div>
      <h3>全天候技术支持</h3>
      <p>提供7x24小时专业技术支持服务，平均响应时间小于15分钟，随时解决您遇到的问题，确保您的业务不受影响</p>
    </div>
    
    <div class="why-us-card">
      <div class="why-us-icon">🔒</div>
      <h3>多重安全防护</h3>
      <p>提供DDoS防护、入侵检测、数据加密等多重安全防护措施，保障您的数据安全和业务稳定运行。</p>
    </div>
    
    <div class="why-us-card">
      <div class="why-us-icon">🚀</div>
      <h3>弹性扩展能力</h3>
      <p>提供灵活的资源配置和弹性扩展能力，能够根据您的业务需求快速调整资源，满足您的业务增长需求。</p>
    </div>
    
    <div class="why-us-card">
      <div class="why-us-icon">💰</div>
      <h3>高性价比方案</h3>
      <p>提供多种灵活的计费方式和优惠活动，能够为您提供高性价比的IDC解决方案，降低您的运营成本。</p>
    </div>
  </div>
</div>
</section>

<!-- 在"为什么选择我们"区域后面、FAQ区域前面添加客户案例区域 -->
<!-- 在"为什么选择我们"区域后面添加客户案例区域 -->
<section id="clients" class="clients">
<div class="container clients-container">
  <div class="section-title">
    <h2>优秀<span>网站案例</span></h2>
    <p>我们为众多行业客户提供了专业的IDC服务，助力他们实现业务增长和数字化转型</p>
  </div>
  
  <div class="clients-grid">
    <div class="client-card">
      <div class="client-img" style="background-image: url('{$setting.web_view}/img/zbl.webp');">
        <div class="client-logo-container">
          <img src="{$setting.web_view}/img/zbl-logo.webp" alt="客户Logo" class="client-logo">
        </div>
      </div>
      <div class="client-content">
        <h3>壁吧专楼吧</h3>
        <p>为知名论坛提供高性能、高可用性的云服务器，支持每日数上千用户访问，确保系统稳定运行，特别是在大型活动期间。</p>
        <div class="client-tags">
          <span class="client-tag">高并发</span>
          <span class="client-tag">负载均衡</span>
          <span class="client-tag">稳定性</span>
        </div>
        <a href="https://zlb.ink/" class="btn btn-primary">点击访问</a>
      </div>
    </div>
    
    <div class="client-card">
      <div class="client-img" style="background-image: url('{$setting.web_view}/img/geek.webp');">
        <div class="client-logo-container">
          <img src="{$setting.web_view}/img/geek-logo.webp" alt="客户Logo" class="client-logo">
        </div>
      </div>
      <div class="client-content">
        <h3>极创云</h3>
        <p>为云计算平台提供等级保护要求的专属云服务，大幅提升全球用户的访问速度和网页安全性。</p>
        <div class="client-tags">
          <span class="client-tag">数据安全</span>
          <span class="client-tag">等保合规</span>
          <span class="client-tag">安全防护</span>
        </div>
        <a href="https://cloud.geekrcloud.cn/" class="btn btn-primary">点击访问</a>
      </div>
    </div>
    
    <div class="client-card">
      <div class="client-img" style="background-image: url('{$setting.web_view}/img/bltcy.webp');">
        <div class="client-logo-container">
          <img src="{$setting.web_view}/img/bltcy-logo.webp" alt="客户Logo" class="client-logo">
        </div>
      </div>
      <div class="client-content">
        <h3>柏拉图次元API</h3>
        <p>为AI聊天平台提供符合稳定性云服务，包括优质路线，确保访问API的业务稳定性。</p>
        <div class="client-tags">
          <span class="client-tag">高稳定</span>
          <span class="client-tag">高分发</span>
          <span class="client-tag">优质路线</span>
        </div>
        <a href="https://bltcy.cn/" class="btn btn-primary">点击访问</a>
      </div>
    </div>
  </div>
</div>
</section>

<!-- 在客户案例区域后面、FAQ区域前面添加新闻动态区域 -->
<section id="news" class="news">
<div class="container news-container">
  <div class="section-title">
    <h2>新闻<span>动态</span></h2>
    <p>了解橘喵云最新动态、行业资讯和技术分享</p>
  </div>
  
  <div class="news-grid">
    <div class="news-card">
      <div class="news-img" style="background-image: url('{$setting.web_view}/img/maintenance.webp');">
        <div class="news-date">2025-3-25</div>
      </div>
      <div class="news-content">
        <h3>十堰/襄阳云服务器配置更改/升级通知</h3>
        <p>2025年3月23日起新购实例将采用新配置（CPU/内存/存储优化），老用户可免费无缝升级（硬盘扩容需备份数据重装系统），配置调整后价格保持不变，3月24日起可通过官网提交工单变更申请。</p>
        <a href="https://news.ogmiao.com/89.html" class="news-link">阅读更多 <span>→</span></a>
      </div>
    </div>
    
    <div class="news-card">
      <div class="news-img" style="background-image: url('{$setting.web_view}/img/maintenance.webp');">
        <div class="news-date">2025-3-25</div>
      </div>
      <div class="news-content">
        <h3>十堰百兆带宽云服务器配置更改/升级通知</h3>
        <p>2025年3月24日起新购实例将采用新配置，老用户可免费升级（硬盘变更需备份数据），价格保持不变，3月25日后可通过官网提交工单变更申请。</p>
        <a href="https://news.ogmiao.com/86.html" class="news-link">阅读更多 <span>→</span></a>
      </div>
    </div>
    
    <div class="news-card">
      <div class="news-img" style="background-image: url('{$setting.web_view}/img/maintenance.webp');">
        <div class="news-date">2025-3-18</div>
      </div>
      <div class="news-content">
        <h3>香港CN2全区维护升级通知</h3>
        <p>香港服务器CN2全区将进行维护升级，整合为大带宽区，期间服务器将短暂中断，带宽全面提升并更换IP地址，用户可获补偿且续费价格不变。</p>
        <a href="https://news.ogmiao.com/73.html" class="news-link">阅读更多 <span>→</span></a>
      </div>
    </div>
  </div>
</div>
</section>

<!-- FAQ区域 -->
<section id="faq" class="faq">
<div class="container faq-container">
  <div class="section-title">
    <h2>常见<span>问题解答</span></h2>
    <p>为您解答常见问题，提供更全面的服务支持</p>
  </div>
  
  <div class="accordion" id="faqAccordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button class="btn btn-link btn-block text-left faq-question" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            什么是IDC服务？
          </button>
        </h2>
      </div>

      <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#faqAccordion">
        <div class="card-body">
          IDC（Internet Data Center）即互联网数据中心，是提供服务器托管、带宽租用、网络安全等服务的场所。我们的IDC服务包括服务器托管、云服务器租用、CDN加速、DDoS防护等全方位解决方案。
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
          <button class="btn btn-link btn-block text-left collapsed faq-question" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            橘喵云有哪些优势？
          </button>
        </h2>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#faqAccordion">
        <div class="card-body">
          橘喵云拥有全球数据中心网络、企业级硬件设施、全天候技术支持、多重安全防护、弹性扩展能力和高性价比方案等优势。我们的服务器采用Intel至强处理器和企业级SSD存储，确保高性能和稳定性。
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-header" id="headingThree">
        <h2 class="mb-0">
          <button class="btn btn-link btn-block text-left collapsed faq-question" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            如何选择适合我的服务器配置？
          </button>
        </h2>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#faqAccordion">
        <div class="card-body">
          选择服务器配置需要考虑您的业务类型、访问量、数据处理需求等因素。对于小型网站，可选择入门级配置；对于电商、游戏等高并发应用，建议选择高性能配置。您可以联系我们的技术顾问，获取专业的配置建议。
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-header" id="headingFour">
        <h2 class="mb-0">
          <button class="btn btn-link btn-block text-left collapsed faq-question" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
            橘喵云的数据安全措施有哪些？
          </button>
        </h2>
      </div>
      <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#faqAccordion">
        <div class="card-body">
          我们采用多层次安全防护体系，包括物理安全（机房安保、监控系统）、网络安全（防火墙、DDoS防护、入侵检测）、数据安全（加密传输、定期备份）等。所有数据中心均通过ISO 27001信息安全管理体系认证，确保您的数据安全。
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-header" id="headingFive">
        <h2 class="mb-0">
          <button class="btn btn-link btn-block text-left collapsed faq-question" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
            如何联系橘喵云客服？
          </button>
        </h2>
      </div>
      <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#faqAccordion">
        <div class="card-body">
          您可以通过官网在线咨询、电话（400-123-4567）、邮件（ogmiao@outlook.com）或提交工单等方式联系我们的客服团队。我们提供7x24小时技术支持，平均响应时间小于15分钟，确保您的问题能够得到及时解决。
        </div>
      </div>
    </div>
  </div>
  
  <div style="text-align: center; margin-top: 2rem;">
    <a href="https://cloud.ogmiao.com/knowledgebase" class="btn btn-primary">
      前往帮助中心解决更多问题
    </a>
  </div>
</div>
</section>

<!-- 联系我们区域 -->
<section id="contact" class="contact">
<div class="container contact-container">
  <div class="section-title">
    <h2>联系<span>我们</span></h2>
    <p>欢迎联系我们，我们将竭诚为您服务</p>
  </div>
  
  <div class="contact-info-grid">
    <div class="contact-info-item">
      <div class="contact-info-icon">📞</div>
      <div class="contact-info-content">
        <h4>电话</h4>
        <p>暂无电话</p>
      </div>
    </div>
    
    <div class="contact-info-item">
      <div class="contact-info-icon">✉️</div>
      <div class="contact-info-content">
        <h4>邮件</h4>
        <p>ogmiao@outlook.com</p>
      </div>
    </div>
    
    <div class="contact-info-item">
      <div class="contact-info-icon">📍</div>
      <div class="contact-info-content">
        <h4>地址</h4>
        <p>上海市浦东新区</p>
      </div>
    </div>
    
    <div class="contact-info-item">
      <div class="contact-info-icon">🎫</div>
      <div class="contact-info-content">
        <h4>工单系统</h4>
        <p>提交工单获取专业技术支持</p>
        <a href="https://cloud.ogmiao.com/submitticket" class="btn btn-primary" style="margin-top: 10px; font-size: 0.9rem; padding: 0.5rem 1rem;">提交工单</a>
      </div>
    </div>
  </div>
</div>
</section>

{include file="common/footer" /}

<!-- 更新移动端底部导航，添加新的导航项 -->
<nav class="mobile-nav">
  <a href="#main-content" class="mobile-nav-item active">
    <div class="mobile-nav-icon">🏠</div>
    <span>首页</span>
  </a>
  <a href="#certificates" class="mobile-nav-item">
    <div class="mobile-nav-icon">🏆</div>
    <span>资质认证</span>
  </a>
  <a href="#datacenter" class="mobile-nav-item">
    <div class="mobile-nav-icon">🌐</div>
    <span>数据中心</span>
  </a>
  <a href="#why-us" class="mobile-nav-item">
    <div class="mobile-nav-icon">✨</div>
    <span>服务优势</span>
  </a>
  <a href="#clients" class="mobile-nav-item">
    <div class="mobile-nav-icon">👥</div>
    <span>客户案例</span>
  </a>
  <a href="#news" class="mobile-nav-item">
    <div class="mobile-nav-icon">📰</div>
    <span>新闻动态</span>
  </a>
  <a href="#faq" class="mobile-nav-item">
    <div class="mobile-nav-icon">❓</div>
    <span>常见问题</span>
  </a>
  <a href="#contact" class="mobile-nav-item">
    <div class="mobile-nav-icon">📞</div>
    <span>联系我们</span>
  </a>
</nav>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // 简单的图片懒加载实现
  function simpleLazyLoad() {
    const lazyImages = document.querySelectorAll('[data-bg], [data-src]');
    
    if ('IntersectionObserver' in window) {
      const imageObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const lazyImage = entry.target;
            
            if (lazyImage.hasAttribute('data-src')) {
              lazyImage.src = lazyImage.dataset.src;
              lazyImage.classList.add('loaded');
            }
            
            if (lazyImage.hasAttribute('data-bg')) {
              lazyImage.style.backgroundImage = `url('${lazyImage.dataset.bg}')`;
              lazyImage.classList.add('loaded');
            }
            
            imageObserver.unobserve(lazyImage);
          }
        });
      });
      
      lazyImages.forEach(image => imageObserver.observe(image));
    } else {
      // 回退方案：立即加载所有图片
      lazyImages.forEach(image => {
        if (image.hasAttribute('data-src')) {
          image.src = image.dataset.src;
        }
        if (image.hasAttribute('data-bg')) {
          image.style.backgroundImage = `url('${image.dataset.bg}')`;
        }
      });
    }
  }
  
  // 初始化懒加载
  simpleLazyLoad();

  // 切换数据中心区域
  document.querySelectorAll('.datacenter-tab').forEach(tab => {
    tab.addEventListener('click', function() {
      const region = this.dataset.region;

      // 移除所有tab的active类
      document.querySelectorAll('.datacenter-tab').forEach(tab => {
        tab.classList.remove('active');
      });

      // 添加active类到当前tab
      this.classList.add('active');

      // 隐藏所有内容区域
      document.querySelectorAll('.datacenter-content').forEach(content => {
        content.classList.remove('active');
      });

      // 显示对应的内容区域
      document.getElementById(region + '-content').classList.add('active');
    });
  });

  // 移除所有现有的FAQ事件监听器
  document.querySelectorAll('.faq-question').forEach(question => {
    const newQuestion = question.cloneNode(true);
    question.parentNode.replaceChild(newQuestion, question);
  });

// 修复FAQ部分的JavaScript代码，确保它正确初始化

// 在DOMContentLoaded事件中初始化FAQ功能

// 使用纯JavaScript实现Bootstrap的collapse功能
function initFAQ() {
  // 获取所有FAQ问题按钮
  const faqQuestions = document.querySelectorAll('.faq-question');
  
  // 为每个问题添加点击事件
  faqQuestions.forEach(question => {
    question.addEventListener('click', function(e) {
      e.preventDefault();
      
      // 获取目标折叠区域的ID
      const targetId = this.getAttribute('data-target');
      const targetCollapse = document.querySelector(targetId);
      
      if (!targetCollapse) return; // 如果找不到目标元素，直接返回
      
      // 检查当前状态
      const isExpanded = this.getAttribute('aria-expanded') === 'true';
      
      if (isExpanded) {
        // 如果已展开，则收起
        this.setAttribute('aria-expanded', 'false');
        this.classList.add('collapsed');
        targetCollapse.classList.remove('show');
        targetCollapse.style.maxHeight = '0';
      } else {
        // 如果已收起，则先收起所有其他项
        document.querySelectorAll('.collapse.show').forEach(collapse => {
          if (collapse.id !== targetId.substring(1)) {
            collapse.classList.remove('show');
            collapse.style.maxHeight = '0';
            
            // 更新对应问题按钮的状态
            const questionBtn = document.querySelector(`[data-target="#${collapse.id}"]`);
            if (questionBtn) {
              questionBtn.setAttribute('aria-expanded', 'false');
              questionBtn.classList.add('collapsed');
            }
          }
        });
        
        // 然后展开当前项
        this.setAttribute('aria-expanded', 'true');
        this.classList.remove('collapsed');
        targetCollapse.classList.add('show');
        targetCollapse.style.maxHeight = targetCollapse.scrollHeight + 'px';
      }
    });
  });
  
  // 确保第一个FAQ默认关闭
  const firstCollapse = document.querySelector('#collapseOne');
  if (firstCollapse) {
    firstCollapse.classList.remove('show');
    firstCollapse.style.maxHeight = '0';
    
    const firstQuestion = document.querySelector('[data-target="#collapseOne"]');
    if (firstQuestion) {
      firstQuestion.setAttribute('aria-expanded', 'false');
      firstQuestion.classList.add('collapsed');
    }
  }
}

// 初始化FAQ
initFAQ();

// 移动端导航高亮函数
function initMobileNav() {
  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 获取所有部分
    const sections = [
      document.getElementById('main-content'),
      document.getElementById('certificates'),
      document.getElementById('datacenter'),
      document.getElementById('why-us'),
      document.getElementById('faq'),
      document.getElementById('contact')
    ];
    
    // 获取当前滚动位置
    const scrollPosition = window.scrollY;
    
    // 找出当前可见的部分
    let currentSection = null;
    let minDistance = Infinity;
    
    sections.forEach(section => {
      if (section) {
        const sectionTop = section.offsetTop;
        const distance = Math.abs(sectionTop - scrollPosition);
        
        if (distance < minDistance) {
          minDistance = distance;
          currentSection = section;
        }
      }
    });
    
    // 更新导航高亮
    if (currentSection) {
      const sectionId = currentSection.id;
      document.querySelectorAll('.mobile-nav-item').forEach(item => {
        item.classList.remove('active');
      });
      
      const activeItem = document.querySelector(`.mobile-nav-item[href="#${sectionId}"]`);
      if (activeItem) {
        activeItem.classList.add('active');
      }
    }
  });
}

// 切换数据中心区域 - 修复版本
function initDatacenterTabs() {
  const tabs = document.querySelectorAll('.datacenter-tab');
  if (tabs.length === 0) return;
  
  tabs.forEach(tab => {
    tab.addEventListener('click', function(e) {
      e.preventDefault();
      const region = this.getAttribute('data-region');
      if (!region) return;
      
      console.log('切换到数据中心区域:', region);
      
      // 移除所有tab的active类
      tabs.forEach(t => t.classList.remove('active'));
      
      // 添加active类到当前tab
      this.classList.add('active');
      
      // 隐藏所有内容区域
      const contents = document.querySelectorAll('.datacenter-content');
      contents.forEach(content => content.classList.remove('active'));
      
      // 显示对应的内容区域
      const targetContent = document.getElementById(region + '-content');
      if (targetContent) {
        targetContent.classList.add('active');
      } else {
        console.error('找不到对应的内容区域:', region + '-content');
      }
    });
  });
  
  // 确保初始状态正确
  const activeTab = document.querySelector('.datacenter-tab.active');
  if (activeTab) {
    const region = activeTab.getAttribute('data-region');
    if (region) {
      const targetContent = document.getElementById(region + '-content');
      if (targetContent) {
        // 隐藏所有内容区域
        document.querySelectorAll('.datacenter-content').forEach(content => {
          content.classList.remove('active');
        });
        // 显示当前活动标签对应的内容
        targetContent.classList.add('active');
      }
    }
  }
}

// 在DOMContentLoaded事件中调用初始化函数
initDatacenterTabs();
});

// 在页面完全加载后再次初始化数据中心标签，确保功能正常
window.addEventListener('load', function() {
  // 延迟执行，确保DOM已完全渲染
  setTimeout(function() {
    initDatacenterTabs();
    console.log('数据中心标签已重新初始化');
  }, 500);
});
</script>
<script>
// 移动端导航高亮当前部分
document.addEventListener('DOMContentLoaded', function() {
  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 获取所有部分
    const sections = [
      document.getElementById('main-content'),
      document.getElementById('certificates'),
      document.getElementById('datacenter'),
      document.getElementById('why-us'),
      document.getElementById('faq'),
      document.getElementById('contact')
    ];
    
    // 获取当前滚动位置
    const scrollPosition = window.scrollY;
    
    // 找出当前可见的部分
    let currentSection = null;
    let minDistance = Infinity;
    
    sections.forEach(section => {
      if (section) {
        const sectionTop = section.offsetTop;
        const distance = Math.abs(sectionTop - scrollPosition);
        
        if (distance < minDistance) {
          minDistance = distance;
          currentSection = section;
        }
      }
    });
    
    // 更新导航高亮
    if (currentSection) {
      const sectionId = currentSection.id;
      document.querySelectorAll('.mobile-nav-item').forEach(item => {
        item.classList.remove('active');
      });
      
      const activeItem = document.querySelector(`.mobile-nav-item[href="#${sectionId}"]`);
      if (activeItem) {
        activeItem.classList.add('active');
      }
    }
  });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  // 初始化FAQ功能
  function initFAQ() {
    const faqQuestions = document.querySelectorAll('.faq-question');

    faqQuestions.forEach(question => {
      question.addEventListener('click', function(e) {
        e.preventDefault();

        // 获取目标折叠区域的ID
        const targetId = this.getAttribute('data-target');
        const targetCollapse = document.querySelector(targetId);

        if (!targetCollapse) return;

        // 检查当前状态
        const isExpanded = this.getAttribute('aria-expanded') === 'true';

        if (isExpanded) {
          // 如果已展开，则收起
          this.setAttribute('aria-expanded', 'false');
          this.classList.add('collapsed');
          targetCollapse.classList.remove('show');
          targetCollapse.style.maxHeight = '0';
        } else {
          // 如果已收起，则先收起所有其他项
          document.querySelectorAll('.collapse.show').forEach(collapse => {
            collapse.classList.remove('show');
            collapse.style.maxHeight = '0';

            const questionBtn = document.querySelector(`[data-target="#${collapse.id}"]`);
            if (questionBtn) {
              questionBtn.setAttribute('aria-expanded', 'false');
              questionBtn.classList.add('collapsed');
            }
          });

          // 展开当前项
          this.setAttribute('aria-expanded', 'true');
          this.classList.remove('collapsed');
          targetCollapse.classList.add('show');
          targetCollapse.style.maxHeight = targetCollapse.scrollHeight + 'px';
        }
      });
    });

    // 确保第一个FAQ默认关闭
    const firstCollapse = document.querySelector('#collapseOne');
    if (firstCollapse) {
      firstCollapse.classList.remove('show');
      firstCollapse.style.maxHeight = '0';

      const firstQuestion = document.querySelector('[data-target="#collapseOne"]');
      if (firstQuestion) {
        firstQuestion.setAttribute('aria-expanded', 'false');
        firstQuestion.classList.add('collapsed');
      }
    }

  // 初始化FAQ
  initFAQ();
});
</script>
</body>
</html>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // 简单的图片懒加载实现
  function simpleLazyLoad() {
    const lazyImages = document.querySelectorAll('[data-bg], [data-src]');
    
    if ('IntersectionObserver' in window) {
      const imageObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const lazyImage = entry.target;
            
            if (lazyImage.hasAttribute('data-src')) {
              lazyImage.src = lazyImage.dataset.src;
              lazyImage.classList.add('loaded');
            }
            
            if (lazyImage.hasAttribute('data-bg')) {
              lazyImage.style.backgroundImage = `url('${lazyImage.dataset.bg}')`;
              lazyImage.classList.add('loaded');
            }
            
            imageObserver.unobserve(lazyImage);
          }
        });
      });
      
      lazyImages.forEach(image => imageObserver.observe(image));
    } else {
      // 回退方案：立即加载所有图片
      lazyImages.forEach(image => {
        if (image.hasAttribute('data-src')) {
          image.src = image.dataset.src;
        }
        if (image.hasAttribute('data-bg')) {
          image.style.backgroundImage = `url('${image.dataset.bg}')`;
        }
      });
    }
  }
  
  // 初始化懒加载
  simpleLazyLoad();

  // 切换数据中心区域
  document.querySelectorAll('.datacenter-tab').forEach(tab => {
    tab.addEventListener('click', function() {
      const region = this.dataset.region;

      // 移除所有tab的active类
      document.querySelectorAll('.datacenter-tab').forEach(tab => {
        tab.classList.remove('active');
      });

      // 添加active类到当前tab
      this.classList.add('active');

      // 隐藏所有内容区域
      document.querySelectorAll('.datacenter-content').forEach(content => {
        content.classList.remove('active');
      });

      // 显示对应的内容区域
      document.getElementById(region + '-content').classList.add('active');
    });
  });

  // 移除所有现有的FAQ事件监听器
  document.querySelectorAll('.faq-question').forEach(question => {
    const newQuestion = question.cloneNode(true);
    question.parentNode.replaceChild(newQuestion, question);
  });

// 修复FAQ部分的JavaScript代码，确保它正确初始化

// 在DOMContentLoaded事件中初始化FAQ功能

// 使用纯JavaScript实现Bootstrap的collapse功能
function initFAQ() {
  // 获取所有FAQ问题按钮
  const faqQuestions = document.querySelectorAll('.faq-question');
  
  // 为每个问题添加点击事件
  faqQuestions.forEach(question => {
    question.addEventListener('click', function(e) {
      e.preventDefault();
      
      // 获取目标折叠区域的ID
      const targetId = this.getAttribute('data-target');
      const targetCollapse = document.querySelector(targetId);
      
      if (!targetCollapse) return; // 如果找不到目标元素，直接返回
      
      // 检查当前状态
      const isExpanded = this.getAttribute('aria-expanded') === 'true';
      
      if (isExpanded) {
        // 如果已展开，则收起
        this.setAttribute('aria-expanded', 'false');
        this.classList.add('collapsed');
        targetCollapse.classList.remove('show');
        targetCollapse.style.maxHeight = '0';
      } else {
        // 如果已收起，则先收起所有其他项
        document.querySelectorAll('.collapse.show').forEach(collapse => {
          if (collapse.id !== targetId.substring(1)) {
            collapse.classList.remove('show');
            collapse.style.maxHeight = '0';
            
            // 更新对应问题按钮的状态
            const questionBtn = document.querySelector(`[data-target="#${collapse.id}"]`);
            if (questionBtn) {
              questionBtn.setAttribute('aria-expanded', 'false');
              questionBtn.classList.add('collapsed');
            }
          }
        });
        
        // 然后展开当前项
        this.setAttribute('aria-expanded', 'true');
        this.classList.remove('collapsed');
        targetCollapse.classList.add('show');
        targetCollapse.style.maxHeight = targetCollapse.scrollHeight + 'px';
      }
    });
  });
  
  // 确保第一个FAQ默认关闭
  const firstCollapse = document.querySelector('#collapseOne');
  if (firstCollapse) {
    firstCollapse.classList.remove('show');
    firstCollapse.style.maxHeight = '0';
    
    const firstQuestion = document.querySelector('[data-target="#collapseOne"]');
    if (firstQuestion) {
      firstQuestion.setAttribute('aria-expanded', 'false');
      firstQuestion.classList.add('collapsed');
    }
  }
}

// 初始化FAQ
initFAQ();

// 移动端导航高亮函数
function initMobileNav() {
  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 获取所有部分
    const sections = [
      document.getElementById('main-content'),
      document.getElementById('certificates'),
      document.getElementById('datacenter'),
      document.getElementById('why-us'),
      document.getElementById('faq'),
      document.getElementById('contact')
    ];
    
    // 获取当前滚动位置
    const scrollPosition = window.scrollY;
    
    // 找出当前可见的部分
    let currentSection = null;
    let minDistance = Infinity;
    
    sections.forEach(section => {
      if (section) {
        const sectionTop = section.offsetTop;
        const distance = Math.abs(sectionTop - scrollPosition);
        
        if (distance < minDistance) {
          minDistance = distance;
          currentSection = section;
        }
      }
    });
    
    // 更新导航高亮
    if (currentSection) {
      const sectionId = currentSection.id;
      document.querySelectorAll('.mobile-nav-item').forEach(item => {
        item.classList.remove('active');
      });
      
      const activeItem = document.querySelector(`.mobile-nav-item[href="#${sectionId}"]`);
      if (activeItem) {
        activeItem.classList.add('active');
      }
    }
  });
}

// 切换数据中心区域 - 修复版本
function initDatacenterTabs() {
  const tabs = document.querySelectorAll('.datacenter-tab');
  if (tabs.length === 0) return;
  
  tabs.forEach(tab => {
    tab.addEventListener('click', function(e) {
      e.preventDefault();
      const region = this.getAttribute('data-region');
      if (!region) return;
      
      console.log('切换到数据中心区域:', region);
      
      // 移除所有tab的active类
      tabs.forEach(t => t.classList.remove('active'));
      
      // 添加active类到当前tab
      this.classList.add('active');
      
      // 隐藏所有内容区域
      const contents = document.querySelectorAll('.datacenter-content');
      contents.forEach(content => content.classList.remove('active'));
      
      // 显示对应的内容区域
      const targetContent = document.getElementById(region + '-content');
      if (targetContent) {
        targetContent.classList.add('active');
      } else {
        console.error('找不到对应的内容区域:', region + '-content');
      }
    });
  });
  
  // 确保初始状态正确
  const activeTab = document.querySelector('.datacenter-tab.active');
  if (activeTab) {
    const region = activeTab.getAttribute('data-region');
    if (region) {
      const targetContent = document.getElementById(region + '-content');
      if (targetContent) {
        // 隐藏所有内容区域
        document.querySelectorAll('.datacenter-content').forEach(content => {
          content.classList.remove('active');
        });
        // 显示当前活动标签对应的内容
        targetContent.classList.add('active');
      }
    }
  }
}

// 在DOMContentLoaded事件中调用初始化函数
initDatacenterTabs();
});

// 在页面完全加载后再次初始化数据中心标签，确保功能正常
window.addEventListener('load', function() {
  // 延迟执行，确保DOM已完全渲染
  setTimeout(function() {
    initDatacenterTabs();
    console.log('数据中心标签已重新初始化');
  }, 500);
});
</script>
<script>
// 移动端导航高亮当前部分
document.addEventListener('DOMContentLoaded', function() {
  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 获取所有部分
    const sections = [
      document.getElementById('main-content'),
      document.getElementById('certificates'),
      document.getElementById('datacenter'),
      document.getElementById('why-us'),
      document.getElementById('faq'),
      document.getElementById('contact')
    ];
    
    // 获取当前滚动位置
    const scrollPosition = window.scrollY;
    
    // 找出当前可见的部分
    let currentSection = null;
    let minDistance = Infinity;
    
    sections.forEach(section => {
      if (section) {
        const sectionTop = section.offsetTop;
        const distance = Math.abs(sectionTop - scrollPosition);
        
        if (distance < minDistance) {
          minDistance = distance;
          currentSection = section;
        }
      }
    });
    
    // 更新导航高亮
    if (currentSection) {
      const sectionId = currentSection.id;
      document.querySelectorAll('.mobile-nav-item').forEach(item => {
        item.classList.remove('active');
      });
      
      const activeItem = document.querySelector(`.mobile-nav-item[href="#${sectionId}"]`);
      if (activeItem) {
        activeItem.classList.add('active');
      }
    }
  });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  // 初始化FAQ功能
  function initFAQ() {
    const faqQuestions = document.querySelectorAll('.faq-question');

    faqQuestions.forEach(question => {
      question.addEventListener('click', function(e) {
        e.preventDefault();

        // 获取目标折叠区域的ID
        const targetId = this.getAttribute('data-target');
        const targetCollapse = document.querySelector(targetId);

        if (!targetCollapse) return;

        // 检查当前状态
        const isExpanded = this.getAttribute('aria-expanded') === 'true';

        if (isExpanded) {
          // 如果已展开，则收起
          this.setAttribute('aria-expanded', 'false');
          this.classList.add('collapsed');
          targetCollapse.classList.remove('show');
          targetCollapse.style.maxHeight = '0';
        } else {
          // 如果已收起，则先收起所有其他项
          document.querySelectorAll('.collapse.show').forEach(collapse => {
            collapse.classList.remove('show');
            collapse.style.maxHeight = '0';

            const questionBtn = document.querySelector(`[data-target="#${collapse.id}"]`);
            if (questionBtn) {
              questionBtn.setAttribute('aria-expanded', 'false');
              questionBtn.classList.add('collapsed');
            }
          });

          // 展开当前项
          this.setAttribute('aria-expanded', 'true');
          this.classList.remove('collapsed');
          targetCollapse.classList.add('show');
          targetCollapse.style.maxHeight = targetCollapse.scrollHeight + 'px';
        }
      });
    });

    // 确保第一个FAQ默认关闭
    const firstCollapse = document.querySelector('#collapseOne');
    if (firstCollapse) {
      firstCollapse.classList.remove('show');
      firstCollapse.style.maxHeight = '0';

      const firstQuestion = document.querySelector('[data-target="#collapseOne"]');
      if (firstQuestion) {
        firstQuestion.setAttribute('aria-expanded', 'false');
        firstQuestion.classList.add('collapsed');
      }
    }

  // 初始化FAQ
  initFAQ();
});
</script>
</body>
</html>

